<template>
	<yd-layout id='teamLeader' class=''>
		<div v-show="leaderList.length>0">
			<img class="header_img" :src="headerImg" alt="" />
			<!--<img class="header_img" src="../../assets/leader_top.png" alt="" />-->
			<ul class="nav">
				<li @click="navNum=3" :class="navNum==3?'nav_active':''">
					<div class="nav_name">高层管理</div>
					<span></span>
				</li>
				<li @click="navNum=1" :class="navNum==1?'nav_active':''">
					<div class="nav_name">精英总裁</div>
					<span></span>
				</li>
				<li @click="navNum=2" :class="navNum==2?'nav_active':''">
					<div class="nav_name">优秀董事</div>
					<span></span>
				</li>
			</ul>
			
			<yd-infinitescroll v-show='navNum==1&&leaderList.length>0' :callback="getLeaderList" ref="infinitescrollDemo">
				<div slot="list" class="list" v-for="item in leaderList" @click="goLeaderDetail(item)">
					<img class="list_img" :src="item.avatar" alt="" />
					<div class="list_right c_size_30_42">
						<div class="list_title c_size_34_48">{{item.nick_name}}</div>
						<div class="list_label c_text_ellipsis_1">{{item.title}}</div>
						<div class="list_introduce  ">
							<span class="c_text_ellipsis_2">{{item.summary}}</span>
						</div>
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>
	
				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<NoList v-show='navNum==1&&leaderList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
			
			<yd-infinitescroll v-show='navNum==2&&goodLeaderList.length>0' :callback="getGoodLeaderList" ref="infinitescrollDemoGood">
				<div slot="list" class="list" v-for="item in goodLeaderList" @click="goLeaderDetail(item)">
					<img class="list_img" :src="item.avatar" alt="" />
					<div class="list_right c_size_30_42">
						<div class="list_title c_size_34_48">{{item.nick_name}}</div>
						<div class="list_label c_text_ellipsis_1">{{item.title}}</div>
						<div class="list_introduce  ">
							<span class="c_text_ellipsis_2">{{item.summary}}</span>
						</div>
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>
	
				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<NoList v-show='navNum==2&&goodLeaderList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
				</NoList>
				
			<yd-infinitescroll v-show='navNum==3&&heightLeaderList.length>0'  :callback="getHeightLeaderList" ref="infinitescrollDemoHeight">
				<div slot="list" class="list" v-for="item in heightLeaderList" @click="goLeaderDetail(item)">
					<img class="list_img" :src="item.avatar" alt="" />
					<div class="list_right c_size_30_42">
						<div class="list_title c_size_34_48">{{item.nick_name}}</div>
						<div class="list_label c_text_ellipsis_1">{{item.title}}</div>
						<div class="list_introduce  ">
							<span class="c_text_ellipsis_2">{{item.summary}}</span>
						</div>
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>
	
				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<NoList v-show='navNum==3&&heightLeaderList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
				</NoList>
		</div>
		
		<NoList v-show='leaderList.length==0'>
			<img slot='img' src="../../assets/kong_3.png" alt="" />
		</NoList>
		
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
		},
		data() {
			return {
				headerImg: '',
				pageNum: 1,
				pageCount: 10,
				leaderList: [],
				navNum:3,
				
				goodLeaderList:[],
				pageNumGood:1,
				
				heightLeaderList:[],
				pageNumHeight:1,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '领袖介绍'
//			this.getLeaderHeaderImg();
			this.getLeaderList()
			this.getGoodLeaderList()
			this.getHeightLeaderList()
		},
		methods: {
			getHeightLeaderList(){
				this.$root.ajax({
					name: 'leader/lst',
					type: 'get',
					params: {
						kind:2,
						page: this.pageNumHeight,
						count: this.pageCount,
					}
				}).then((d) => {
					this.headerImg = d.data.bg_img
					this.heightLeaderList = [...this.heightLeaderList, ...d.data.leader_list];

					if(this.heightLeaderList.length >= d.data.leader_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemoHeight.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemoHeight.$emit('ydui.infinitescroll.finishLoad');

					this.pageNumHeight++;
				})
			},
			getGoodLeaderList(){
				this.$root.ajax({
					name: 'leader/lst',
					type: 'get',
					params: {
						kind:1,
						page: this.pageNumGood,
						count: this.pageCount,
					}
				}).then((d) => {
					this.headerImg = d.data.bg_img
					this.goodLeaderList = [...this.goodLeaderList, ...d.data.leader_list];

					if(this.goodLeaderList.length >= d.data.leader_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemoGood.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemoGood.$emit('ydui.infinitescroll.finishLoad');

					this.pageNumGood++;
				})
			},
			getLeaderList() {
				this.$root.ajax({
					name: 'leader/lst',
					type: 'get',
					params: {
						kind:0,
						page: this.pageNum,
						count: this.pageCount,
					}
				}).then((d) => {
					this.leaderList = [...this.leaderList, ...d.data.leader_list];

					if(this.leaderList.length >= d.data.leader_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;
				})
			},
			//请求头图
			getLeaderHeaderImg() {
				this.$root.ajax({
					name: 'leader/index',
					params: {},
					type: 'get'
				}).then((d) => {
					this.headerImg = d.data.top_img
				})
			},
			goLeaderDetail(item) {
				this.$router.push({
					name: 'leaderDetail',
					query: {
						id: item.id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './teamLeader.scss';
</style>